<template>
	<view>
	
		<!-- <u-navbar style="position: fixed;top: 0;left: 0;" :back-text="name" back-icon-color="#fff" :back-text-style="{
		color:'#fff',
		fontSize:'36rpx'
	}" :background="{
		background:'#1E55A7'
	}" ></u-navbar>
			
		</u-navbar>
		 -->
		<!-- :style="{ marginTop: `${barHeight+statusBarHeight+20}px` }" -->
		<view >
			<!-- list -->
			<view class="list" v-for="(item,index) in list" :key="index">
				<!-- v-if="item.types == 2" -->
				
				
				<view style="display: flex;align-items: center;"  v-if="item.status=='left'">
					<image style="width: 86upx;height: 86upx;border-radius: 50%;margin-right: 18upx;" class="tx" :src="item.avatar" mode=""></image>
					<view class="">
						<view v-if="item.fa_time&&item.status=='left'" class="fr-c" style="font-size: 28rpx;font-weight: 700;color: #000;">
							{{item.fa_time}}
						</view>
							<view style="background-color: #fff;padding: 10rpx;margin-top: 15rpx;" class="info">{{item.content}}</view>
					</view>
				
				</view>
				 <!-- v-if="item.types == 1" -->
				<view  class="right" v-if="item.status=='right'">
					<view class="">
						<view v-if="item.fa_time&&item.status=='right'" class="flex-end" style="font-size: 28rpx;font-weight: 700;color: #000;">
							{{item.fa_time}}
						</view>
							<view style="background-color: #fff;padding: 10rpx;margin-top: 15rpx;" class="info">{{item.content}}</view>
					</view>
				
						<image class="tx" :src="item.avatar" mode="aspectFill"></image>
				<!-- 	<image class="tx" :src="userinfo.avatar" mode="aspectFill"></image> -->
				</view>
			</view>
			<view class="titles">
				<view class="s1">
					对方议价
				</view>
				<view class="s2">
					立即接单
				</view>
				<view class="s2">
					/
				</view>
				<view class="s2">
					同意议价
				</view>
			</view>
			<view class="tembox ">
				<view class="tembox-icon">
					<u-icon name="close-circle" color="" size="14"></u-icon>
				</view>
				<view class="tembox-title">
					议价金额
				</view>
				<view class="inputbox">
					<input type="text" v-model="content" placeholder="请输入您想留言的内容" />
				</view>
				<view class="btn flex-center" @click="fasong">确定</view>
			</view>
			<view style="height: 100upx;"></view>
			<view class="bombox flex-center">
				
					<view class="inputbox">
						<input type="text" v-model="content" placeholder="请输入您想留言的内容" />
					</view>
					<view class="btn flex-center" @click="fasong">发送</view>
				
				
			</view>
		</view>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				name:'',
				list:[
					{
						fa_time:'名字',
						content:'内容',
						status:'left',
						avatar:"https://cdn.uviewui.com/uview/swiper/swiper1.png"
						
					},
					{
						fa_time:'名字',
						content:'内容',
						status:'right',
						avatar:"https://cdn.uviewui.com/uview/swiper/swiper1.png"
						
					},
					{
						fa_time:'名字',
						content:'内容',
						status:'left',
						avatar:"https://cdn.uviewui.com/uview/swiper/swiper1.png"
						
					},
					{
						fa_time:'名字',
						content:'内容',
						status:'right',
						avatar:"https://cdn.uviewui.com/uview/swiper/swiper1.png"
						
					}
				],
				tag:0,
				storeid:'',//店铺id
				user_id:'',//用户id
				// userinfo: uni.getStorageSync('userinfo'),
				page: 1,
				limit: 99999,
				
				total: 0,
				content: '' ,//内容
				statusBarHeight:0, // 胶囊数据
				barHeight:0, // 自定义导航栏高度 = 胶囊高度 + 胶囊的padding*2, 如果获取不到设置为38
				    
			}
		},
		onLoad(e) {
			  // this.statusBarHeight = uni.getSystemInfoSync().statusBarHeight; 
			  //   // 胶囊数据
			  //   const { top, height } = wx.getMenuButtonBoundingClientRect();
			  //   // 自定义导航栏高度 = 胶囊高度 + 胶囊的padding*2, 如果获取不到设置为38
			  //   this.barHeight = height ? height + (top - this.statusBarHeight) * 2 : 38;
			if(e.tag=='商家名'){
				this.tag=0
				this.storeid=e.storeid
				this.usinfo(e.storeid)
				
				
				
			}else if(e.tag=='用户'){
				this.tag=1
				this.storeid=e.storeid
				this.user_id=e.user_id
				this.usinfo(e.storeid)
				
				
			}
			
			
			setTimeout(() => {
				uni.pageScrollTo({
					scrollTop: 99999,
					duration: 300
				});
			}, 300)
		},
		onReachBottom() {
			if (this.list.length < this.total) {
				this.page = this.page + 1
				this.usinfo()
			}
		},
		onPullDownRefresh(e) {
			if (this.list.length < this.total) {
				this.page = this.page + 1
				this.usinfo();
			} else {
				uni.stopPullDownRefresh();
			}
		},
		methods: {
			usinfo(storeid){
				this.$post({
					url: '/store/exchange',
					data: {
						store_id: this.storeid,
						type:this.tag,
						page: this.page,
						limit: this.limit,
						user_id:this.user_id
					}
				}).then(res=>{
					this.total=res.data.count
						this.list = this.page==1?res.data.exchange:[...res.data.exchange,...this.list],
					uni.setNavigationBarTitle({
						title:res.data.top_name
					});
				})
				
			},
			//获取列表数据
			getlist() {
				let data = {
					page: this.page,
					limit: this.limit
				}
				chatlist(data).then(res => {
					uni.stopPullDownRefresh();
					let list = res.data.data.list
					list.forEach((item, index) => {
						this.list.unshift(item)
					})
					this.total = res.data.data.total;
			
				})
			},
			//发送留言
			fasong() {
				
				
				setTimeout(() => {
					uni.pageScrollTo({
						scrollTop: 99999,
						duration: 300
					});
				}, 500)
				this.$post({
					url: '/store/addexchange',
					data: {
						store_id: this.storeid,
						type:this.tag,
						conten:this.content,
						user_id:this.user_id
					}
				}).then(res => {
					this.list.push(
						res.data
					)
					this.content = '';
					setTimeout(() => {
						uni.pageScrollTo({
							scrollTop: 99999,
							duration: 300
						});
					}, 500)
				})
			}
		}
	}
</script>

<style lang="less">
	page{
		background: #EEF7FF;
	}
	.titles{
		width: 500rpx;
		display: flex;
		align-items: center;
		margin: 0 auto;
		margin-bottom: 15rpx;
		.s1{
			color: red;
			font-size: 28rpx;
		}
		.s2{
			color: #1890FF;
			font-size: 28rpx;
		}
	}
	.tembox{
		width: 500rpx;
		height: 280rpx;
		border-radius: 14rpx;
		background-color: #fff;
		margin: 0 auto;
		position: relative;
		padding: 20rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		.tembox-icon{
			position: absolute;
			top: 20rpx;
			right: 20rpx;
		}
		.tembox-title{
			width: 100%;
			text-align: center;
			font-size: 28rpx;
			color: #000;
		}
		.inputbox {
			width: 400rpx;
			height: 64rpx;
			background: #F6F0F0;
			border-radius: 44upx;
			margin-top: 30rpx;
			box-shadow: 0px 0px 20upx 0px rgba(0, 0, 0, 0.16);
			
			input {
				width: 400rpx;
				height: 64rpx;
				margin-left: 30upx;
				font-size: 26upx;
			}
		}
		.btn {
			width: 200upx;
			height: 70upx;
			background: #1890FF ;
			border-radius: 10upx;
			font-size: 26upx;
			color: #ffffff;
			margin-top: 30rpx;
		}
		
	}
	

	
	
	
	.list {
		width: 690upx;
		margin: 50upx auto;
	
		.left {
			display: flex;
	
			image {
				width: 86upx;
				height: 86upx;
				border-radius: 50%;
				margin-right: 18upx;
			}
	
		
		}
	.info {
		max-width: 470upx;
		box-sizing: border-box;
		padding: 26upx 20upx;
		font-size: 28upx;
		background: #FFFFFF;
		border-radius: 10upx;
	}
		.right {
			display: flex;
			justify-content: flex-end;
	
			image {
				width: 86upx;
				height: 86upx;
				border-radius: 50%;
				margin-left: 18upx;
			}
	
			
		}
	}
	
	.bombox {
		width: 750upx;
		height: 120upx;
		position: fixed;
		left: 0;
		bottom: 0;
		background: #ffffff;
	
		.inputbox {
			width: 550upx;
			height: 70upx;
			background: #F6F0F0;
			border-radius: 44upx;
			margin-right: 30upx;
			box-shadow: 0px 0px 20upx 0px rgba(0, 0, 0, 0.16);
	
			input {
				width: 450upx;
				height: 70upx;
				margin-left: 30upx;
				font-size: 26upx;
			}
		}
	
		.btn {
			width: 100upx;
			height: 70upx;
			background: #1890FF ;
			border-radius: 10upx;
			font-size: 26upx;
			color: #ffffff;
		}
	}
	
	
	

	
	
	
	
</style>
